<template>
  <!-- 输入框 -->
  <div style="width: 300px;">
    <!-- clearable 可一键清空 -->
    <h3>输入框</h3>
    <el-input v-model="name" clearable placeholder="请输入用户名"/>

    <!-- show-password 可切换显示隐藏密码 -->
    <h3>密码框</h3>
    <el-input v-model="password" show-password placeholder="请输入密码"/>

    <h3>文本域</h3>
    <el-input type="textarea" v-model="content" :rows="2"/>

    <h3>前置</h3>
    <el-input v-model="url1">
      <template #prepend>https://</template>
    </el-input>

    <h3>后置</h3>
    <el-input v-model="email">
      <template #append>@qq.com</template>
    </el-input>

    <h3>前置后置</h3>
    <el-input v-model="url2">
      <template #prepend>https://</template>
      <template #append>.com</template>
    </el-input>

  </div>
</template>

<script setup>
const name = ref('')
const password = ref('')
const content = ref('邓瑞编程')
const url1 = ref('dengruicode.com')
const url2 = ref('dengruicode')
const email = ref('123456')
</script>

<style scoped>

</style>